<template>
	<div style="height: calc(100%);">
		<el-card shadow="always" style="background-color: #00A65A;">
			<div class="title">
				<span>文章:</span>
				<span>{{article}}</span>
			</div>
			<i class="iconi el-icon-notebook-2"></i>
			<div class="more" @click="more(1)">
				更多<i class="el-icon-right
"></i>
			</div>
		</el-card>
		<el-card shadow="always" style="background-color: #F39C12;">
			<div class="title">
				<span>评论:</span>
				<span>{{discuss}}</span>
			</div>
			<i class="iconi el-icon-chat-round"></i>
			<div class="more" @click="more(2)">
				更多<i class="el-icon-right
"></i>
			</div>
		</el-card>
		<el-card shadow="always" style="background-color: #DD4B39;">
			<div class="title">
				<span>用户:</span>
				<span>{{user}}</span>
			</div>
			<i class="iconi el-icon-place"></i>
			<div class="more" @click="more(3)">
				更多<i class="el-icon-right
"></i>
			</div>
		</el-card>
		<div class="bodyCard" style="height: calc(100% - 193px);">
			<tableList style="margin-right: 1%;" title="最新文章"></tableList>
			<tableList title="最新评论"></tableList>
		</div>
	</div>
</template>

<script>
	import tableList from "../../components/tableList.vue"
	export default {
		name: "odometer",
		data() {
			return {
				article: 4,
				discuss: 4,
				user: 8,
			}
		},
		components: {
			tableList
		},
		created() {
			this.getnum()
		},
		methods: {
			async getnum() {
				let {
					data
				} = await this.$axios.get('/blog/users/adminwpynum');
				this.article = data.data.article;
				this.discuss = data.data.discuss;
				this.user = data.data.user;
			},
			more(dataType) {
				if (dataType == '1') {
					this.$router.push("/articleManage")
				} else if (dataType == '2') {
					this.$router.push("/discussManage")
				} else if (dataType == '3') {
					this.$router.push("/userManage")
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.el-card {
		width: 33%;
		display: inline-block;
		color: #fff;
		line-height: 100px;
		margin: 0px;

		.title {
			width: 50%;
			display: inline-block;
			text-align: initial;
			font-size: 20px;
			font-weight: 700;
		}

		.more {
			height: 20px;
			line-height: 20px;
			background-color: rgb(91 94 96 / 50%);
			cursor: pointer;
		}
	}

	.iconi {
		width: 20px;
		height: 20px;
		font-size: 100px;
		width: 50%;
		color: rgb(91 94 96 / 50%);
	}
</style>
